<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .row{
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f3f3f3;
            width: 500px;
            height: 60px;
            margin: 0 0 10px;
            padding: 10px;
        }
        .btn{
            width: 150px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .box    {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app"></div>
<script>
    let demo={
        template:`
        <div class="menu" >
            <div class="row">
                <p>{{demoBox.name}}</p>
                <div class="box">
                    <p>$:{{demoBox.price}}</p>
                    <div class="btn">
                        <button @click="down">-</button>
                        <p>{{demoBox.count}}</p>
                        <button @click="add">+</button>  
                    </div>
                </div>
            </div>
        </div>`,
        props:['demoBox'],
        methods:{
            down(){
                // this.demoBox.count -=1 
                this.$emit('down',this.demoBox)
            },
            add(){
                this.$emit('add',this.demoBox)
            }
        },
    data(){
        return{
        }
    },
    mounted () {
        console.log('demoBox')
    }
} 
    let App = {
        template:`
        <div>
            <template v-for="item in list">
                <demo :demoBox="item" @down="down" @add="add"></demo>
            </template>
            <p :style="{textAlign:'right',width: '500px'}">总价格:{{priced}}</p>
        </div>
    `,
    components:{demo},
    data(){
        return{
            count:1,
            price:130,
            list: [
                { name: '香蕉', price: 10, count: 1 },
                { name: '苹果', price: 20, count: 1 },
                { name: '葡萄', price: 30, count: 1 },
                { name: '榴莲', price: 50, count: 1 },
                { name: '西瓜', price: 20, count: 1 },
            ],
    }
    },
    computed:{
        priced() {
            let sum = 0;
            this.list.forEach((item)=> {
            sum += item.count * item.price
            })
            return sum
        }
    },
    methods:{ 
        add:function(item){
            if(item.count >= 4){
                alert('最多四件哦')
            }else{
                item.count++
            }
        },
        down:function(item){
            if(item.count===1){
                alert('最少一件')
            }else{
                item.count--
            }
        }
    },
    }
    new Vue({
        render: h => h(App)
    }).$mount("#app")
</script>
</body>
</html>